<template>
  <div class="setting">
    <h1>编辑个人信息</h1>
    <div class="container">
      <form class="form" ref="formRef">
        <div class="form-group">
          <label class="form-label">头像地址</label>
          <input type="url" class="form-control" placeholder="请输入头像链接" v-model="form.image">
        </div>
        <div class="form-group">
          <label class="form-label">昵称</label>
          <input type="text" class="form-control" placeholder="请输入昵称" v-model="form.username">
        </div>
        <div class="form-group">
          <label class="form-label">简介</label>
          <textarea class="form-control" placeholder="介绍一下你吧" v-model="form.bio"></textarea>
        </div>
        <div class="form-group">
          <label class="form-label">邮箱</label>
          <input type="email" class="form-control" placeholder="请输入邮箱" v-model="form.email">
        </div>
        <div class="form-group">
          <label class="form-label">密码</label>
          <input type="password" class="form-control" placeholder="请输入密码" v-model="form.password">
        </div>
        <button class="btn" @click.prevent="handleSubmit">提交</button>
      </form>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
  import { UPDATE_USER } from 'src/store/constants'
  import { profileFormProps, putProfile } from 'src/services/auth/'
  export default defineComponent({
    setup () {
      const formRef = ref<HTMLFormElement | null>(null)
      const store = useStore()
      const form = reactive<profileFormProps>({
        image: store.state.user.image,
        username: store.state.user.username,
        bio: store.state.user.bio,
        email: store.state.user.email,
        password: ''
      })
      const router = useRouter()
      const handleSubmit = async () => {
        await putProfile(form)
        store.dispatch(UPDATE_USER)
        router.push({ name: 'profile', params: {username: store.state.user.username}})
      }
      return {
        formRef,
        form,
        handleSubmit
      }
    }
  })
</script>

<style lang="scss" scoped>
  .setting {
    padding-bottom: 40px;
  }
</style>